<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex'; // 导入 Vuex store
import { ElMessage } from "element-plus";

const store = useStore(); // 获取 Vuex store
const orderId = ref(''); // 假设订单ID是通过某种方式获取的
const status = ref(''); // 当前选择的状态
const messageSent = ref(false); // 短信发送状态

const statuses = ['已下单', '已寄送', '已取件', '异常']; // 可选状态

const updateStatus = () => {
  store.dispatch('updateOrderStatus', { orderId: orderId.value, status: status.value })
      .then(() => {
        ElMessage.success({ message: '订单状态更新成功', duration: 1000 });
      })
      .catch((error) => {
        console.error("更新订单状态失败", error);
        ElMessage.error({ message: '订单状态更新失败', duration: 1000 });
      });
};

const sendNotification = () => {
  // 这里可以添加发送短信的逻辑
  messageSent.value = true;
  ElMessage.success({message: '短信通知已发送', duration: 1000});
};
</script>

<template>
  <div>
    <el-select v-model="status">
      <el-option v-for="s in statuses" :key="s" :value="s">{{ s }}</el-option>
    </el-select>
    <el-button @click="updateStatus" type="primary">确认更新状态</el-button>
    <el-button @click="sendNotification" type="danger">发送短信通知</el-button>
  </div>
</template>

<style>
/* 添加样式 */
</style>
